<template>
  <div class="qselect" tabindex="-1" @focus="show"  v-clickoutside="handleClickOutSide">
      <label v-if="qValue === ''">{{msg}}</label>
      <!--<span class="label-span" v-else>{{msg2}}</span>-->
      <span class="label-span" v-else>{{msg3}}</span>
    <!--<input type="text" placeholder="Please select a q" v-model="msg">-->
      <i  class="el-icon-date clearbtn" ></i>
      <el-collapse-transition>
      <div v-show="qmaskshow" class="qmask">
        <div class="tab">
          <i class="el-icon-d-arrow-left leftbtn" @click="left"></i>
          <span class="qtxt">FY{{String(this.currtime-3).slice(2) + (+String(this.currtime-3).slice(2) + 1)}}-FY{{String(this.currtime).slice(2) + (+String(this.currtime).slice(2) + 1)}}</span>
          <i class="el-icon-d-arrow-right rightbtn"  @click="right"></i>
          <table class="qtable">
            <template v-for="(item,index) in qdata">
              <tr>
                <!--<td class="thead">{{item[0]}}</td>-->
                <td class="thead">FY{{String(item[0]).slice(2) + (+String(item[0]).slice(2) + 1)}}</td>
                <template v-for="(itemsub,indexsub) in item">
                  <td :class="[{nosel:itemsub < startT}, {nosel:itemsub > endT},{active:itemsub === selqdata}]" @click="qclick(itemsub,item[0],indexsub)" v-if="indexsub !== 0">Q{{indexsub}}</td>
                </template>
              </tr>
            </template>
          </table>
        </div>
      </div>
      </el-collapse-transition>
  </div>
</template>

<script>
import clickoutside from './clickoutside';

export default {
  name: 'qselect',
  props: {
    value: String,
    time: Number,
    startT: Number,
    endT: Number
  },
  directives: {
    'clickoutside': clickoutside
  },
  data() {
    return {
      qmaskshow: false,
      // msg: '请选择季度',
      msg2: '',
      msg3: '',
      qValue: '',
      qdata: [],
      selqdata: 0,
      currtime: 0
    };
  },
  mounted() {
    this.currtime = this.time;
    this.init();
  },
  methods: {
    handleClickOutSide() {
      this.qmaskshow = false;
    },
    init() {
      this.qdata = [];
      for (var i = this.currtime - 3; i <= this.currtime; i++) {
        this.qdata.push([i, parseInt(`${i}1`), parseInt(`${i}2`), parseInt(`${i}3`), parseInt(`${i}4`)]);
      }
    },
    qclick(seltime, year, index) {
      // const s = this.startT;
      // const e = this.endT;
      // if (seltime >= s && seltime <= e) {
      //   this.selqdata = seltime;
      //   this.msg = `${year}Q${index}`;
      //   this.$emit('input', this.msg);
      // }
      this.selqdata = seltime;
      // this.msg = `${year}Q${index}`;
      this.msg2 = `${year}Q${index}`;
      let first = `${year}`.slice(2);
      let last = +first + 1
      this.msg3 = `FY${first}${last}Q${index}`;
      this.qValue = `${year}0${index}`;
      this.$emit('input', this.qValue);
      this.$emit('change', this.msg3);
    },
    show() {
      this.qmaskshow = true;
    },
    left() {
      this.currtime -= 3;
      this.init();
    },
    right() {
      this.currtime += 3;
      this.init();
    }
  },
  computed: {
    msg(){
      return this.$t('filter.quarter')
    }
  }
};
</script>

<style lang="scss" scoped>
.qselect {
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    /*width: 195px;*/
    width: 165px;
    height: 40px;
    border: 1px solid #bfcbd9;
    background-color: #fff;
    border-radius: 4px;
    padding-left: 8px;
    outline: none;
  label {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 530;
    line-height: 40px;
    color: #bfcbd9;
    padding-left: 10px;
    margin-left: 12px;
  }
  .label-span {
    margin-left: 12px;
    padding-left: 10px;
  }
    .clearbtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 36px;
        height: 30px;
        text-align: center;
        line-height: 40px;
        color: #bfcbd9;
        cursor: pointer;
    }
    .qmask {
        position: absolute;
        right: 0;
        /*top: 36px;*/
        top: 40px;
        background-color: #fff;
        width: 196px;
        height: 200px;
        border: 1px solid #d1dbe5;
        border-radius: 4px;
        z-index: 2003 !important;
        .tab {
            position: relative;
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            color: #999;
            .leftbtn {
                position: absolute;
                left: 0;
                top: 0;
                height: 36px;
                width: 36px;
                line-height: 36px;
                text-align: center;
                cursor: pointer;
            }
            .rightbtn {
                position: absolute;
                right: 0;
                top: 0;
                height: 36px;
                width: 36px;
                line-height: 36px;
                text-align: center;
                cursor: pointer;
            }
            .qtxt {
                display: inline-block;
                height: 36px;
                line-height: 36px;
                color: #999;
            }
            .qtable {
              margin: 0 auto;
                td {
                    cursor: pointer;
                    display: inline-block;
                    height: 30px;
                    line-height: 30px;
                    padding: 0 6px;
                }
                .thead {
                    cursor: default;
                }
                .active {
                    background-color: #20a0ff;
                    color: #fff;
                }
              /*禁用状态*/
                /*.nosel{*/
                  /*color: #bfcbd9;*/
                  /*cursor: not-allowed;*/
                /*}*/
            }
        }
    }
}
</style>
